<template>
  <div class="node-manage">
    <div class="ivrAnnouncementNodeLink-wrap">
      <div class="search">
        <search ref="search" :inputTitle="'请输入节点名称进行查询'" :currentPage="currentPage" :count="count" :disabledReload="disabledReload" @exportMethod="exportAct" @inputChange="inputChangeAct" @turnPage="turnPageAct"></search>
      </div>
      <diyTable :tableHeader="tableHeader" :tableData="tableList" @exportAct="tableOpera"></diyTable>
      <left-slide :title="addOrEditObj.title" :visible.sync="isShowLeft" :showFooter="false">
        <component :is="addOrEditObj.activeName" :form="addOrEditObj.announcementForm" @cancelClick="cancelClickAct" @saveClick="saveAct"></component>
      </left-slide>
    </div>
  </div>
</template>
<script>
  import {filterAct, handleFakePage} from '@/utils/m7Utils'
  import ivrAnnouncementNodeLinkDeal from './ivrNodeEditContent/ivrAnnouncementNodeLinkDeal.vue'
  import diyTable from '@/components/ui-modules/diytable/index.vue'
  import leftSlide from '@/components/ui-modules/newConfig/leftSlide.vue'
  import search from '../base/search.vue'
  export default {
    name: 'ivrAnnouncementNodeLink',
    data () {
      return {
        isShowLeft: false,   //  添加或编辑
        disabledReload: true,  //  生效按钮是否能够点击
        addOrEditObj: {      //   添加或编辑状态
          title: '添加播放语音节点',
          activeName: 'ivrAnnouncementNodeLinkDeal',
          announcementForm: {}
        },
        tableHeader: [
          {prop: 'DisplayName', label: '节点'},
          {prop: 'Exten', label: '节点ID'},
          {prop: 'soundName', label: '语音文件名称'},
          {prop: 'UpdateTime', label: '最后更新时间'},
          {prop: 'operaSet', label: '操作', width: 150, opera: [{actMethod: 'update', actName: '修改'}, {actMethod: 'del', actName: '删除'}]}
        ],                        //   自定义 表头
        currentPage: 1,
        count: 0,
        tableList: [],   //  用于表格渲染数据
        totalList: [],   //  所有返回的列表数据   需要假分页在处理一下
        handledList: [],   //  被模糊搜索过的list数据
        oldPBX: ''     //   离开组件时  保存pbx  激活组件时 与当前pbx做对比  如果不一致  查询列表
      }
    },
    components: {
      search,
      diyTable,
      leftSlide,
      ivrAnnouncementNodeLinkDeal
    },
//    watch: {
//      PBX () {
//        this.$refs.search.exportMethod('refresh')
//      }
//    },
    computed: {
      Account () {
        return this.$store.state.session.account.account
      },
      PBX () {
        return this.$store.state.config.callCenter.currentPBX
      }
    },
    methods: {
//        添加刷新生效方法接收
      exportAct (val) {
        if (val === 'add') {
          this.add()
        } else if (val === 'refresh') {
          this.refresh()
        } else if (val === 'active') {
          this.active()
        }
      },
      add () {
        let announcementFormDefault = {
          DisplayName: '',
          Filename: '',
          NotBreak: false,
          ToPeerType: '',
          ToPeer: '',
          _id: ''
        }
        this.addOrEditObj.title = '添加播放语音节点'
        this.addOrEditObj.activeName = 'ivrAnnouncementNodeLinkDeal'
        this.addOrEditObj.announcementForm = announcementFormDefault
        this.isShowLeft = true
      },
      refresh () {
        this.queryAnnouncement()
      },
      active () {
        let obj = {}
        obj.PBX = this.PBX
        obj.Account = this.Account
        this.$store.dispatch('reloadIvr', obj).then(res => {
          if (res.success) {
            this.disabledReload = true
            this.$message({
              type: 'success',
              message: this.$t('configLazyLoad.process.effectiveSuccessfully')
            })
          }
        })
      },
      //  搜索列表
      inputChangeAct (val) {
        this.handledList = filterAct(val, 'DisplayName', this.totalList)
        this.count = this.handledList.length || 0
        this.currentPage = 1
        this.tableList = handleFakePage(this.currentPage, this.handledList)
      },
      turnPageAct (val) {
        this.currentPage = val
        this.tableList = handleFakePage(this.currentPage, this.handledList)
      },
//      表格操作栏事件
      tableOpera (obj) {
//        console.log(obj.actMethod)
//        console.log(obj.data)
        if (obj.actMethod === 'update') {
          this.addOrEditObj.title = '修改播放语音节点'
          this.addOrEditObj.activeName = 'ivrAnnouncementNodeLinkDeal'
          this.addOrEditObj.announcementForm = obj.data
          this.isShowLeft = true
        } else if (obj.actMethod === 'del') {
          this.delAct(obj.data)
        }
      },
      cancelClickAct () {
        this.isShowLeft = false
      },
//      添加和修改都走这一个方法
      saveAct () {
        this.$refs.search.exportMethod('refresh')
        this.isShowLeft = false
        this.disabledReload = false   //  生效按钮可以点击了
      },
//      删除
      delAct (val) {
        this.$confirm('此语音播放节点将被删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('deleteAnnouncement', val).then(res => {
            this.$refs.search.exportMethod('refresh')
            this.disabledReload = false    //  生效按钮可以点击了
            this.$message({
              type: 'success',
              message: this.$t('config.channel.deleteSuccess')
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },
//      查询列表
      queryAnnouncement () {
        this.$store.dispatch('queryAnnouncement', {Account: this.Account, PBX: this.PBX}).then(resp => {
          let ivrSound = []
          if (this.$store.state.session.ivrMap && this.$store.state.session.ivrMap[this.PBX]) {
            ivrSound = this.$store.state.session.ivrMap[this.PBX].data.ivr_sound
          }
          if (resp && resp.success) {
            let listData = []
            resp.list.forEach(one => {
              if (!one.ServiceNo) {
                listData.push(one)
              }
            })
            listData.forEach(one => {
              ivrSound.forEach(item => {
                if (item.Filename === one.Filename) {
                  this.$set(one, 'soundName', item.DisplayName)
                }
              })
            })
            this.totalList = listData
            this.handledList = listData
            this.count = this.handledList.length || 0
            this.currentPage = 1
            this.tableList = handleFakePage(this.currentPage, this.handledList)
            this.$store.commit('SET_IVRMAP_DETAIL', {PBX: this.PBX, typeName: 'ivr_node_announcement', data: listData || [], flag: 'data', node: this})
          }
        })
      }
    },
    deactivated () {
      this.oldPBX = this.PBX
    },
    activated () {
      if (this.oldPBX !== this.PBX) {
        this.$refs.search.exportMethod('refresh')
      }
    },
    beforeMount () {
//      this.queryAnnouncement()
    }
  }
</script>

<style lang="stylus" scoped>
  .search
    border 1px solid #E7E7EB
    border-bottom none
</style>
